<template>
  <div>
    <el-row>
      <el-col :span="18">
        <!--查询按钮区域-->
        <el-form :inline="true" ref="queryForm" :model="queryMap" class="demo-form-inline">
          <el-form-item label="餐品名称" prop="mname">
            <el-input v-model="queryMap.mname" placeholder="餐品名称"></el-input>
          </el-form-item>
          <el-form-item label="价格区间" style="margin-left: 10px">
            <el-input style="width: 170px" v-model="queryMap.price1" placeholder="价格"></el-input>
            &nbsp;~&nbsp;
            <el-input style="width: 170px" v-model="queryMap.price2" placeholder="价格"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="reset" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="1">
        &nbsp;
      </el-col>
      <el-col :span="5">
        <!--增删改按钮-->
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="openEditDialog(key)">编辑</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="deleteData(key)">删除</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!--餐品信息表格-->
    <el-table
      :data="dataList"
      border
      stripe
      :row-style="{height: '30px'}"
      :height="height"
      style="width: 100%"
      @selection-change="selectChange"
      :row-class-name="tableRowClassName"
    >
      <!--序号列-->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="55"
        :index="indexMethod">
      </el-table-column>
      <!--全选框-->
      <el-table-column
        type="selection"
        align="center"
        width="55">
      </el-table-column>
      <el-table-column
        prop="mealno"
        align="center"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mname"
        align="center"
        label="餐品名称"
        width="500">
      </el-table-column>
      <el-table-column
        prop="price"
        align="center"
        label="餐品价格">
      </el-table-column>
      <el-table-column
        align="center"
        label="餐品图片"
        width="200"
      >
        <template slot-scope="scope">
          <img v-if="scope.row.picture !== null || scope.row.picture !== ''" :src="scope.row.picture"
               style="width: 50px; height: 35px;" alt="">
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      class="pagination"
      layout="prev, pager, next, sizes, total"
      :total="total"
      :page-size="queryMap.limit"
      :current-page="queryMap.page"
      :page-sizes="limits"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>

    <meal-model ref="model" :formTitle="formTitle"></meal-model>
  </div>
</template>

<script>
    import MealModel from '@/components/MealModel'
    import tableMixin from '@/mixins/tableMixin'

    export default {
        name: "MealList",
        components: {
            MealModel
        },
        mixins: [tableMixin],
        data() {
            return {
                //后台接口路径
                url: {
                    getDataList: 'getMealByPage',
                    getOne: 'getMealByMealno',
                    delBatch: 'delMeal'
                },
                //主键
                key: 'mealno',
                queryMap: {
                    limit: 7
                },
                limits: [7,10,15,20]
            }
        },
        methods: {
            /**
             * 重写方法：打开编辑弹窗
             */
            openEditDialog(key) {
                //判断用户是否只勾选了一条数据
                if (this.checkedData.length !== 1) {
                    this.$message.warning("请选择一条记录进行编辑")
                    return
                }
                //获取选中记录的主键
                let num = this.checkedData[0][key]
                const params = {}
                params[key] = num
                this.$http.get(this.url.getOne, {
                    params: params
                }).then(res => {
                    this.$refs.model.openEditDialog()
                    this.$refs.model.modelForm = res.data
                    if (res.data.picture) {
                        this.$refs.model.fileList = [{
                            name: "temp",
                            url: res.data.picture
                        }]
                    } else {
                        this.$refs.model.fileList = []
                    }
                })
            },
            /**
             * 重写方法：查询操作
             */
            query() {
                const isNum = /^\d*$/
                const price1 = this.queryMap.price1
                const price2 = this.queryMap.price2

                if ((!price1 || isNum.test(price1) && (!price2 || isNum.test(price2)))) {
                    this.queryMap.page = 1
                    this.getDataList()
                } else {
                    this.$message.warning("价格区间须为整数")
                }
            },
            /**
             * 重写方法：重置
             */
            resetForm() {
                this.$refs.queryForm.resetFields()
                this.queryMap.price1 && (this.queryMap.price1 = null)
                this.queryMap.price2 && (this.queryMap.price2 = null)
            }
        }
    }
</script>

<style scoped>

</style>